<!DOCTYPE HTML>
<html>
<head th:include="/common/head :: head">
</head>
<link href="/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/lib/wangEditor/css/wangEditor.min.css" />
<style type="text/css">
.divX{
	width: 20px;
    height: 20px;
/*     margin-top: -48px; */
    float: right;
    border: 1px solid;
    line-height: 20px;
    text-align: center;
    border-radius: 20px;
    cursor: pointer;
/*     margin-right: -5px; */
}
.divJia{
	width: 70px;
    height: 70px;
    float: left;
    color: #eee;
    font-size: 93px;
    margin-left: 20px;
    border-radius: 100px;
    line-height: 55px;
    text-align: center;
    border: 5px solid #eee;
    margin-top:45px;
    cursor: pointer;
}
</style>
<body>
	<div class="page-container">
		<form action="/activity/save" method="post" class="form form-horizontal" id="submitForm">
			<input type="hidden" id="id" name="id" th:value="${entity.id}" />
			<input type="hidden" id="delIds" name="delIds" />
			<input type="hidden" id="coverPicUrl" name="coverPicUrl" th:value="${entity.coverPicUrl}" />
			<input type="hidden" id="publishStatus" name="publishStatus" th:value="${entity.publishStatus==null?'N':entity.publishStatus}" />
			<input type="hidden" id="guestList" th:value="${entity.activityGuestList}" />
			<input type="hidden" id="guestNum" th:value="${#lists.size(entity.activityGuestList)}" />
			
			
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2">列表缩略图：</label>
				<div class="formControls col-xs-8 col-sm-9">
				<div id="fileList" class="uploader-list">
				<div id="' + file.id + '" class="file-item thumbnail" th:if="${entity.coverPicUrl!=null}">
	                <img width="100px" height="100px" th:src="${ossUrl+entity.coverPicUrl}" src=""/>
	            </div>
				</div>
					<div id="uploader-demo">
					    <!--用来存放item-->
					    <div id="fileList" class="uploader-list"></div>
					    <div id="filePicker">选择图片</div>
					</div>
				</div>
			</div>

			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2">走进阿里：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="hidden" id="aliContent" name="aliContent" th:value="${entity.aliContent}" />
					<div id="aliContentUE" th:utext="${entity.aliContent}" style="height:400px;max-height:500px;"></div>
				</div>
			</div>

			<div class="row cl " th:replace="/common/fromtag :: fromInput('活动名称','name',${entity.name})"></div>

			<div class="row cl " th:include="/common/fromtag :: areaselect('活动区域',${entity.province},${entity.city},${entity.district})"></div>
			
			<div class="row cl " th:include="/common/fromtag :: fromInput('活动地点','address',${entity.address})"></div>
			
			<div class="row cl " th:include="/common/fromtag :: date('报名日期','registrationStartTime',${entity.registrationStartTime},'registrationEndTime',${entity.registrationEndTime})"></div>
			
			<div class="row cl " th:include="/common/fromtag :: dateTime('活动时间','activityStartDate',${entity.activityStartDate},'activityEndDate',${entity.activityEndDate})"></div>
			
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2">活动内容：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="hidden" id="content" name="content" th:value="${entity.content}" />
					<div id="contentUE" th:utext="${entity.content}" style="height:400px;max-height:500px;"></div>
				</div>
			</div>
			
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2" >特邀嘉宾：</label>
				<div class="formControls col-xs-8 col-sm-8" id="divPhoto">
				
					<th:block th:each="activityGuest,iterStat : ${entity.activityGuestList}">
						<div th:replace="/common/fromtag :: fromPhoto(${activityGuest.faceImgUrl},${activityGuest.id},${activityGuest.name},${activityGuest.intro},${iterStat.index},0)"></div> 
					</th:block>
					
					<th:block th:each="i : ${#numbers.sequence( #lists.size(entity.activityGuestList)==0?0:#lists.size(entity.activityGuestList), 9)}">
						<div th:replace="/common/fromtag :: fromPhoto(null,'','','',${i},${i})"></div>
					</th:block>
					
				</div>
				<div class="divJia" onclick="toAddGuest()">+</div>
			</div>
			
			<div class="row cl" th:unless="${entity.id == null}">
				<label class="form-label col-xs-4 col-sm-2">快速预览：</label>
				<div class="formControls col-xs-8 col-sm-8">
					<div th:if="${entity.qrcodeUrl!=null}">
		                <img width="100px" height="100px" th:src="${ossUrl+entity.qrcodeUrl}" />
		            </div>
				</div>
			</div>

			<div class="row cl">
				<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2" >
<!-- 					<button class="btn btn-primary radius" type="submit"> -->
					<button onClick="tosubmit('submitForm');" class="btn btn-primary radius" type="button">
						<i class="Hui-iconfont">&#xe632;</i> 保存
					</button>
				<th:block th:if="${entity.publishStatus==null or entity.publishStatus.value == '未发布'}">
					<button  href="javascript:;" onClick="publish();" class="btn btn-secondary radius" type="button" ><i class="Hui-iconfont">&#xe632;</i> 发布活动</button>
				</th:block>
					<button onClick="toBack();" class="btn btn-default radius layui-layer-close layui-layer-close1" type="button">&nbsp;&nbsp;返回&nbsp;&nbsp;</button>
				</div>
			</div>
		<div class="row cl">
				<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2" style="height:48px;">
				</div>
			</div>
		</form>
		<div class="row cl">
				<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2" style="height:24px;">
				</div>
			</div>
	</div>


	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript" src="/lib/My97DatePicker/4.8/WdatePicker.js"></script>
	<script type="text/javascript" src="/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
	<script type="text/javascript" src="/lib/jquery.validation/1.14.0/validate-methods.js"></script>
	<script type="text/javascript" src="/lib/jquery.validation/1.14.0/messages_zh.js"></script>
	<script type="text/javascript" src="/lib/webuploader/0.1.5/webuploader.min.js"></script>
	<script type="text/javascript" src="/lib/wangEditor/js/wangEditor.min.js"></script>
	<script type="text/javascript" src="/js/upload.js"></script> 
	<script type="text/javascript" src="/js/editor.js"></script> 
	
	<script type="text/javascript">
	function tosubmit(formId){
		if($("#submitForm").validate().form()){
			var f = true;
			var coverPicUrl = $("#coverPicUrl").val();
			if(coverPicUrl== "" || coverPicUrl == null){
				layer.msg('请选择上传列表缩略图!',{icon:2,time:3000});
				f = false;
				return false;
			}
			
			$(".divX").each( function(i, guest){
				var nameVal = $("#activityGuestList\\["+i+"\\]\\.name").val();
				console.info("nameVal:" +i+" :::: "+nameVal);
				if(nameVal!=""){
					var url = $("#activityGuestList"+i).val();
					console.info("url:" +i+" :::: "+url);
					if(url==null || url==""){
						layer.msg('还有特邀嘉宾的头像为空，请上传图片!',{icon:2,time:3000});
						f = false;
						return false;
					}
				}
			});
// 			layer.msg('小伙子，你很不错!',{icon:1,time:2000});
// 			return false;
			if(f){
				$("#"+formId).submit();
			}	
			
		}
	}
	var showIndex = $("#guestNum").val();
	function toAddGuest(){
		if(showIndex>10){
			alert('特邀嘉宾最多只能有10个！');
		}else{
			showIndex++;
			$('.divChild').each(function(){
				if($(this).is(':hidden')){
// 					$(this).css('display','block');
					$(this).show();
					$(this).find('.webuploader-pick').next().css('width','100%').css('height','100%');
					return false;
				}
			});
		}
	}
	
	//删除特邀嘉宾
	function toHideGuest(obj,num){
		showIndex--;
// 		if(showIndex>0){
			$(obj).parent().hide();
			$(obj).parent().find('img').parent().remove();
			$("#activityGuestList"+num).val('');
			$("#activityGuestList\\["+num+"\\]\\.name").val('');
			$("#activityGuestList\\["+num+"\\]\\.intro").html('');
			var gid = $("#activityGuestList\\["+num+"\\]\\.id").val();
			if(gid!=''){
				var d = gid +","+$("#delIds").val();
				$("#delIds").val(d);
			}
			$("#activityGuestList\\["+num+"\\]\\.id").val('');
// 		}else{
// 			alert("");
// 		}
	}
	
	//发布活动
	function publish(){
			var id = $("#id").val();
			if(id==null || id==''){
				alert('请先保存活动！');
				return;
			}
			$.ajax({
				url:"/activity/publish",
				type:"POST",
				dataType:"json",
				async:false,  
				data:"id="+id,
				success:function(data){
					if(data){
						alert('发布成功!');
						window.parent.location.reload();
					}
				}
			});
	}
	
		$(function() {
			imgUpload('filePicker','coverPicUrl','fileList');
			
			$("#divPhoto .divX").each(function(i){
				imgUpload('guestPicker_'+i,'activityGuestList'+i,'guestPhoto_'+i);
				 });
			
			var aliContentUE =new wangEditor('aliContentUE');
			editorInit(aliContentUE);
			aliContentUE.create();
			var contentUE = new wangEditor('contentUE');
			editorInit(contentUE);
			contentUE.create();
			
			
			//表单验证方法
			$("#submitForm").validate({
				rules:{
					coverPicUrl:{
						required:true,
					},
					name:{
						required:true,
						maxlength:40
						//stringCheck:true
					},
					province:{required:true,},
					city:{required:true,},
					district:{required:true,},
					registrationStartTime:{required:true,},
					registrationEndTime:{required:true,},
					activityStartDate:{required:true,},
					activityEndDate:{required:true,},
					address:{
						required:true,
						stringCheck:true
					},
					
				},
				onkeyup:false,
				focusCleanup:true,
				success:"valid",
				submitHandler:function(form){
					$("#aliContent").val($("#aliContentUE").html());
					$("#content").val($("#contentUE").html());
					
					
					$(form).ajaxSubmit({
				        type: "post",
				        dataType: "text",
				        beforeSend: function () {
				        	$('.btn').attr('disabled',true);
					    },
				        success: function(data){
				        	if(data!="false"){
				        		alert("保存成功");
				        		window.location.replace("/activity/update?id="+data);
// 				        		var index = parent.layer.getFrameIndex(window.name);
// 								parent.$('.btn-refresh').click();
// 								parent.layer.close(index);
				        	}else{
				        		alert("保存失败");
				        	}
				        }
				    });
					
					
				}
			});
			
		});
	</script>
</body>
</html>